<template>
<div>
  <table-layout :haveSider="true">
    <template #sider>
      <sider-tree
        :treeDatas="treeData"
        @onSelectTree="onSelectTree"
      ></sider-tree>
    </template>
    <template #searchBox>
      <search-layout 
          :formInfos="formInfos"
          :formDatas="formDatas"
          @onFind="onFind"
          ></search-layout>
    </template>
    <template #batchOperat>
      <batch-operat-btn :addData="true">
        <template #cusBtn>
          <!-- <a-button type="primary" icon="vertical-align-bottom" size="small"> 自定义按钮 </a-button> -->
          <!-- <im-export></im-export> -->
        </template>
      </batch-operat-btn>
    </template>
    <template #tableList="">
      <a-list-table
        :columns="columns"
        :tableData="listdata"
        :pagination="pagination"
        :isSelecttion="true"
        :loading="loading"
        :scroll="{ x: 1800, y: 310 }"
        @onTableChange="handleTableChange"
        @onTouchCell="onTouchCell"
        @onSelect="onSelect"
        @onAction="onAction"
      ></a-list-table>
    </template>
  </table-layout>
  <basic-modal 
    :modalOpt="modal1"
    @closeModal="closeModal">
    <template>
      <a-list-info :infoDatas="aListData"></a-list-info>
      <a-list-table
        :columns="columns1"
        :tableData="listdata1"
        :pagination="pagination1"
        :isSelecttion="true"
        :loading="loading1"
        :scroll="{ x: 1800, y: 250 }"
        @onTableChange="onTableChange1"
        @onTouchCell="onTouchCell2"
        @onSelect="onSelect2"
      ></a-list-table>
    </template>
    <template #cusBtn>
      <a-button type="primary" >自定义按钮</a-button>
    </template>
  </basic-modal>
  <basic-modal 
    :modalOpt="modal2"
    @closeModal="closeModal2"></basic-modal>
</div>
  
</template>

<script>
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import siderTree from '@/views/app/biz/common/siderTree'
import basicModal from '@/views/app/biz/common/basicModal'
import aListInfo from '@/views/app/biz/common/aListInfo'
import aListTable from '@/views/app/biz/common/aListTable'
import imExport from '@/components/common/imExport'
const columns = [
  { title: '序号', width: 50, dataIndex: 'num', key: 'num' ,align:'center',fixed: 'left', },
  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', align:'center',scopedSlots:{ customRender: 'column' } },
  { title: 'Age', width: 100, sorter: true, dataIndex: 'age', key: 'age' ,align:'center' },
  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 ,align:'center' },
  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150,align:'center'  },
  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150,align:'center'  },
  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 ,align:'center' },
  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150,align:'center'  },
  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 ,align:'center' },
  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 ,align:'center' },
  { title: 'Column 8', dataIndex: 'address', key: '8' ,align:'center' },
  {title: '操作',dataIndex: 'action', key: 'operation',width: 150 ,fixed: 'right',align:'center' ,scopedSlots:{ customRender: 'action' },},
];

const rowSelection = {//多选操作
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
const treeData = [
  {
    title: 'A省',
    key: '0',
    children: [
      {
        title: '第一医院',
        key: '0-0',
      },
      {
        title: '第二医院',
        key: '0-1',
        children: [
          { title: '一分院', key: '0-1-0' },
          { title: '一分院', key: '0-1-1' },
        ],
      },
      {
        title: '第三医院',
        key: '0-2',
      },
    ],
  },
  {
    title: 'B省',
    key: '1',
    children: [
      { title: '第一医院', key: '1-0' },
      { title: '第一医院', key: '1-1' },
    ],
  },
  {
    title: 'C省',
    key: '2',
    isLeaf: true
  },
];
const formInfos=[
        {label:'平台订单号1',name:'oid',type:'input',placeholder:'请输入'},
        {label:'省',name:'adress1',type:'select',placeholder:'请选择',options:[{id:'1',value:'四川'},{id:'2',value:'陕西'}],link:'1'},
        {label:'市',name:'adress2',type:'select',placeholder:'请选择',options:[{id:'1',value:'成都'},{id:'2',value:'泸州'}],link:'2'},
        {label:'时间段',name:'times',type:'datarange',width:335},
        {label:'创建日期',name:'time',type:'datatime',},
        {label:'a2',name:'select1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'a'},{id:'2',value:'b'}]},
        {label:['查询','重置'],type:'botton'}
      ]
const formDatas={
        oid:'',
        adress1:undefined,
        adress2:undefined,
        times:[null,null],
        time:null,
        select1:undefined
      }
export default {
  components:{
    searchLayout,
    batchOperatBtn,
    tableLayout,
    siderTree,
    basicModal,
    aListInfo,
    aListTable,
    imExport
  },
  data() {
    return {
      treeData:treeData,
      columns:columns,
      listdata:[],
      opt:'查看详情',
      loading:false,
      isSelecttion:'true',
      rowSelection,
      pagination:{//分页配置
        defaultCurrent:1,
        defaultPageSize:7,
        total:2000,
        showQuickJumper:true,
        showSizeChanger:true,
        pageSizeOptions:['10', '20', '50', '100']
      },
      pagination1:{//modal1的分页配置
        defaultCurrent:1,
        defaultPageSize:5,
        total:200,
        showQuickJumper:true,
        showSizeChanger:true,
        pageSizeOptions:['10', '20', '50', '100']
      },
      formInfos:formInfos,
      formDatas:formDatas,
      pData:{//请求列表的数据
        page:1,//页码
        pageNum:7,//每页显示条数
      },
      modal1:{
        modalVisible:false,
        modalTitle:'查看详情',
        modalWidth:'1080px'
      },
      columns1:columns,
      listdata1:[],
      loading1:false,
      pData1:{//modal1请求列表的数据
        page:1,//页码
        pageNum:5,//每页显示条数
      },
      modal2:{
        modalVisible:false,
        modalTitle:'查看详情',
        modalWidth:'500px'
      },
      aListData:[],
      
      
    };
  },
  computed:{
  },
  mounted(){
    this.getList(this.pData)
  },
  methods:{
    handleTableChange(pagination,filters,sorter){
      console.log("触发改变页码,筛选,排序时的回调",pagination);
      this.pagination.current=pagination.current
      this.pData.page=pagination.current
      this.pData.pageNum=pagination.pageSize
      this.pData.page=pagination.current
      this.pData.pageNum=pagination.pageSize
      this.getList(this.pData);
    },
    onSelectTree(selectedKeys, info){
      console.log("点击左侧树形选择",selectedKeys, info);
      this.getList(this.pData)
    },
    getList(params) {
      console.log("请求列表时传入的数据",params);
      let _id=0
      _id=(params.page-1)*params.pageNum 
      this.loading=true
      setTimeout(() => {
        this.loading=false
        let total=Math.random()*101
        this.pagination.total=total
        let resdata=[]
        for (let i = 0; i < params.pageNum; i++) {
          resdata.push({
            key: i,
            num:_id+i+1,
            name: `ab${Math.random()}`,
            age: 32,
            address: `异步请求数据订单列表 ${Math.random()}`,
            action: ['编辑','查看','删除'],
          });
        }
        this.listdata=resdata
      }, 500);
      
      console.log(this.listdata);
    },
    onFind(val){
      console.log("多条件查询参数",val);
      this.getList(this.pData)
    },
    onTouchCell(text, record, index){
      this.modal1.modalVisible=true
      console.log("点击单元格中的内容",text, record, index);
      let orderinfo=[]
      for (let i = 0; i < 11; i++) {
        orderinfo.push({
          id:i,
          title:"订单编号"+i,
          value:i==2?"":"4564646416541"
        })
      }
      this.aListData=orderinfo
      this.getList1(this.pData1);
    },
    onTouchCell2(){
      this.modal2.modalVisible=true
    },
    onAction(text, record, index){
      console.log("点击聊表中的操作按钮",text, record, index);
      
    },
    onSelect(record, selected, selectedRows){
      console.log("onSelect1",record, selected, selectedRows);
    },
    closeModal(){
      this.modal1.modalVisible=false
    },
    closeModal2(){
      this.modal2.modalVisible=false
    },
    onTableChange1(pagination, filters, sorter){
      console.log("触发改变页码,筛选,排序时的回调",pagination);
      this.pagination1.current=pagination.current
      this.pData1.page=pagination.current
      this.pData1.pageNum=pagination.pageSize
      this.getList1(this.pData1);
    },
    getList1(params) {
      console.log("请求modal1列表时传入的数据",params);
      let _id=0
      _id=(params.page-1)*params.pageNum 
      this.loading1=true
      setTimeout(() => {
        this.loading1=false
        let resdata=[]
        let total=Math.random()*1000
        this.pagination1.total=total
        for (let i = 0; i < params.pageNum; i++) {
          resdata.push({
            key: i,
            num:_id+i+1,
            name: `ab${Math.random()}`,
            age: 32,
            address: `异步请求数据订单商品列表 ${Math.random()}`,
            action: ['查看'],
          });
        }
        this.listdata1=resdata
      }, 500);
      
      console.log(this.listdata);
    },
    onSelect2(record, selected, selectedRows){
      console.log("onSelect2",record, selected, selectedRows);
    }
  }
};
</script>

<style>

</style>